<!-- 日历 -->
<template>
	<view class="">
		<uni-calendar 
		class="uni-calendar--hook" 
		:selected="info.selected"
		 :showMonth="false" 
		 @change="change" 
		 />

		<view class="mt20">
			<button type="primary" @tap="openrili">打开日历</button>
		</view>

		<uni-popup ref="popup" type="bottom" :animation="true">
			<view class="row fz28 z6 dfgdfye bgff pd bbm">
				<view class="col" @tap="lksrertt">
					取消
				</view>
				<view class="col tr" @tap="lksrertt">
					确定
				</view>
			</view>
			<uni-calendar class="uni-calendar--hook" />
		</uni-popup>

	</view>
</template>
<script>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)
		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		data() {
			return {
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				}
			}
		},
		onLoad() {
			// 设置日历里面的信息
			this.info.selected = [{
					date: getDate(new Date(), -3).fullDate,
					info: '打卡'
				},
				{
					date: getDate(new Date(), -2).fullDate,
					info: '签到',
					data: {
						custom: '自定义信息',
						name: '自定义消息头'
					}
				},
				{
					date: getDate(new Date(), -1).fullDate,
					info: '已打卡'
				}
			]
		},
		components: {},
		methods: {
			change(e) {
				// 模拟动态打卡
				if (this.info.selected.length > 5) return
				this.info.selected.push({
					date: e.fulldate,
					info: '打卡'
				})
			},
			openrili() {
				this.$refs.popup.open()
			},
			lksrertt() {
				this.$refs.popup.close()
			}
		},
		mounted() {}
	}
</script>
<style scoped>
	.dfgdfye {
		line-height: 70rpx;
	}
</style>
